<template>
    <model :title="info.name">

        <section class="blog-details">
            <div class="container">
                <div class="row">

                    <div class="col-lg-6">
                        <div class="blog-details__image">
                            <img :src="'/PTSG/images/getPhoto/' + info.id" class="img-fluid" style="width: 100%">
                        </div>
                    </div>


                    <div class="col-lg-6">
                        <div class="blog-sidebar">

                            <table class="table table-germ">
                                <tbody>
                                <tr>
                                    <th>Name</th>
                                    <td>{{info.name}}</td>
                                </tr>
                                <tr>
                                    <th>Latin Name</th>
                                    <td>{{info.latin}}</td>
                                </tr>
                                <tr>
                                    <th>分类</th>
                                    <td>{{info.classes}}</td>
                                </tr>
                                <tr>
                                    <th>Family</th>
                                    <td>{{info.family}}</td>
                                </tr>
                                <tr>
                                    <th>Family Latin</th>
                                    <td>{{info.familyLatin}}</td>
                                </tr>
                                <tr>
                                    <th>Genus</th>
                                    <td>{{info.genus}}</td>
                                </tr>
                                <tr>
                                    <th>Genus Latin</th>
                                    <td>{{info.genusLatin}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

                <div class="blog-details__meta">
                    <div class="blog-details__tags">
                        <span>Geographical Info:</span>
                    </div>
                </div>

                <div class="row">
                    <table class="table table-germ">
                        <tbody>
                        <tr>
                            <th>Distribution area</th>
                            <td>{{info.location}}</td>
                        </tr>
                        <tr>
                            <th>Population suitable growth area</th>
                            <td>{{info.area}}</td>
                        </tr>
                        </tbody>
                    </table>

                    <div class="map-box">
                        <div id="location-map" style="height: 650px;"></div>
                        <div id="area-map" style="height: 650px;"></div>
                    </div>


                </div>
            </div>
        </section>


    </model>
</template>

<script>
    export default {
        name: "germInfo",
        data() {
            return {
                info: {}
            }
        },
        props: {
            id: Number
        },
        watch: {
            $route() {
                this.getData()
            }
        },
        methods: {
            getData() {
                let _this = this;
                axios.post("/PTSG/germ/getById/" + _this.id).then(res => {
                    _this.info = res.data;

                    $.getJSON('/PTSG/map/getMapById/' + _this.id, function (datas) {
                        let mapdata = datas.mapData;
                        _this.plotMap("location-map", datas.location, mapdata, "Distribution area ")
                        _this.plotMap("area-map", datas.area, mapdata, "Population suitable growth area")

                    })


                })
            },
            plotMap(id, data, mapdata, title) {
                new Highcharts.Map(id, {
                    title: {
                        text: title
                    },
                    credits: {
                        enabled: false
                    },
                    mapNavigation: {
                        enabled: true,
                        enableMouseWheelZoom: false,
                        buttonOptions: {
                            verticalAlign: 'bottom'
                        }
                    },
                    tooltip: {
                        useHTML: true,
                        headerFormat: '<table><tr><td> {}</td></tr>',
                        pointFormat: '<tr><td>City:</td><td> {point.properties.fullname}</td></tr>' +
                            '<tr><td>Location:</td><td> {point.properties.longitude},{point.properties.latitude}</td></tr>',
                        footerFormat: '</table>'
                    },
                    colorAxis: {
                        min: 0,
                        minColor: '#fff',
                        maxColor: '#1f4e3d',
                        labels: {
                            style: {
                                "color": "red", "fontWeight": "bold"
                            }
                        }
                    },
                    series: [{
                        data: data,
                        mapData: mapdata,
                        joinBy: 'name',
                        name: '中国地图',
                        allowPointSelect: true,
                        cursor: 'pointer',
                        states: {
                            hover: {
                                color: '#a4edba'
                            },
                            select: {
                                color: 'orange',
                                borderColor: 'black',
                                dashStyle: 'shortdot'
                            }
                        },
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }]
                });

            }
        },
        mounted() {

            loadJs("/assets/Highmaps-6.1.0/highmaps.js", function () {
                loadJs("/assets/Highmaps-6.1.0/data.js")
            })

            this.getData();


        }
    }
</script>

<style lang="scss">

    .blog-details {
        padding-top: 40px;
    }

    .table-germ {
        tbody {
            th {
                white-space: nowrap;
                font-family: var(--heading-font);
                color: var(--thm-black);
                font-weight: 500;
                font-size: 1.2rem;
                padding: 5px;
                vertical-align: middle;
            }

            td {
                vertical-align: middle;
            }
        }
    }

    .blog-details__meta {
        margin-top: 10px;
    }

    .map-box{
        display: flex;
    }

</style>